<!DOCTYPE html>
<html lang="en" xmlns:th = "http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/book.css">
    <link rel="stylesheet" href="./css/comment.css">
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/search.css">
    <link rel="shortcut icon" href="img/starfall.png" type="image/x-icon">
    <title th:text="${session.topic.title}">StatFall</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/4.3.0/marked.min.js" type="text/javascript"></script>
    
</head>
<body background="./img/bg.png">
    <ul class="ul">
        <li class="li_home"><a class="a_home" href="/home">首页</a></li>
        <li><a href="/topic">主题</a></li>
        <li><a href="https://www.minecraft.net/zh-hans">Minecraft</a></li>
        <li><a href="https://minecraft.fandom.com/zh/wiki/Minecraft_Wiki">Minecraft Wiki</a></li>
        <div class="minSearch">
            <form action="/topic/search" method="get">
                <div>
                    <input type="text" name="search" placeholder="搜你所想"><button type="submit"></button>
                </div>
            </form>
        </div>
        <li th:if="${session.user != null}" class="li_user"><img th:src="@{'/head_img/'+${session.user.head}}" alt="">
            <div class="menu">
                <p th:text="${session.user.name}">User</p>
                <div class="exp">
                    <input class="expBarValue" type="hidden" th:value="${session.userExp.present}">
                    <div class="expBar"></div>
                </div>
                <span class="level"><span th:text="'Lv:'+${session.user.level}">Lv:1</span>&ensp;&ensp;<span th:text="${session.userExp.exp}+'/'+${session.userExp.maxExp}">0/1</span></span>
                <div class="operate">
                    <a class="ul_border" href="/set">设置</a>
                    <a class="ul_border" href="/signIn">签到</a>
                    <a class="ul_border" href="/exit">退出</a>
                </div>
            </div>
        </li>
        <script src="./js/exp.js"></script>
        <li th:if="${session.user == null}" class="li_user" ><a href="/login">! 请登录 !</a></li>
    </ul>
    <div class="windows">
        <script>
            function close(){
                let window = document.querySelector(".windows");
                window.style.display = 'none';
            }
            function btn(){
                close();
            }
        </script>
        <a class="close" href="javascript:close()">×</a>
        <p class="windowsTitle" style="font-size: 30px;">aaa</p>
        <br><br>
        <span class="windowsContent">aaa</span>
        <button class="btn" onclick="btn()">确认</button>
    </div>
    <div class="main">
        <div class="book">
            <div class="top"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="bookCenter">
                <table class="title">
                    <th class="titleLeft">
                        <div>
                            查看：<span class="num1" th:text="${session.topic.view}">1000</span>
                            &ensp;
                            评论：<span class="num2" th:text="${session.topic.comment}">2000</span>
                        </div>
                    </th>
                    <th class="titleRight"><h1>[<a href="/topic" th:text="${session.topic.label}">标签</a>] <span th:text="${session.topic.title}">标题title</span> <a href="" class="copyHref">[复制链接]</a></h1></th>
                </table>
                <table class="line">
                    <th class="lineLeft"></th>
                    <th class="lineRight"></th>
                </table>
                <table class="mainTable">
                    <td class="author">
                        <div class="authorContent">
                            <div class="authorName">
                                <span><a class="user" th:href="'/personal?user='+${session.topic.user}" th:text="${session.topic.username}">TuringICE</a></span>
                            </div>
                            <div class="authorHead">
                                <a th:href="'/personal?user='+${session.topic.user}"><img th:src="'../head_img/'+${session.topic.userhead}" alt=""></a>
                            </div>
                            <div class="authorInf">
                                <!-- <p class="authorInfP">&ensp;作者信息：</p> -->
                                <span class="authorInfSpan">&emsp;Information</span>
                                <br>
                                <span class="authorInfText" th:text="${session.topic.userinformation}">哈嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</span>
                            </div>
                        </div>
                    </td>
                    <td class="content">
                        <table class="contentTable">
                            <tr>
                                <td class="contentTop" style="height: 47px">
                                    &nbsp;<img style="width: 15px" src="./img/Cicon.gif" alt=""> <span>发表于<span th:text="${session.topic.date}">0000-00-00</span></span>
                                    <div class="likeDiv" th:if="${session.user == null}">
                                        <a href="javascript:like(0)" class="like"></a>
                                        <a href="javascript:like(0)" class="dislike"></a>
                                    </div>
                                    <div class="likeDiv" th:if="${(session.user != null && session.topicUserLike.getGood() == 0) || session.topicUserLike == null}" th:value="${(session.user != null && session.topicUserLike.getGood() == 0) || session.topicUserLike == null}">
                                        <a href="javascript:like(1)" class="like"></a>
                                        <a href="javascript:like(2)" class="dislike"></a>
                                    </div>
                                    <div class="alreadyLike likeDiv" th:if="${session.topicUserLike.getGood() == 1}">
                                        <a href="javascript:like(3)" class="like"></a>
                                        <span th:text="${session.topicLikeCount}">1000</span>
                                        <a href="javascript:like(2)" class="dislike"></a>
                                    </div>
                                    <div class="alreadyDislike likeDiv" th:if="${session.topicUserLike.getGood() == 2}">
                                        <a href="javascript:like(1)" class="like"></a>
                                        <a href="javascript:like(3)" class="dislike"></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color: initial;border: 0;">
                                    <table class="contentInf">
                                        <!-- <tr>
                                            <td><h1><span>标签</span>作品发布</h1></td>
                                        </tr> -->
                                        <caption><span th:text="${session.topic.label}">标签</span>作品发布</caption>
                                        <tr>
                                            <th>作品名称：</th>
                                            <td th:text="${session.topic.titlename}">标题</td>
                                        </tr>
                                        <tr>
                                            <th>Title：</th>
                                            <td th:text="${session.topic.titleenglishname}">title</td>
                                        </tr>
                                        <tr>
                                            <th>来源 source：</th>
                                            <td th:text="${session.topic.source}">原创|搬运</td>
                                        </tr>
                                        <tr>
                                            <th>适用版本 version：</th>
                                            <td th:text="${session.topic.version}">0.00.0</td>
                                        </tr>
                                        <tr>
                                            <th>作者 author：</th>
                                            <td th:text="${session.topic.authorname}">作者</td>
                                        </tr>
                                        <tr>
                                            <th>语言 language：</th>
                                            <td th:text="${session.topic.language}">简体中文|English</td>
                                        </tr>
                                        <tr>
                                            <th>原帖 address：</th>
                                            <td><a th:href="${session.topic.address}" th:text="${session.topic.address}">https://www.address.com</a></td>
                                        </tr>
                                        <tr>
                                            <th>下载 download：</th>
                                            <td><a th:href="${session.topic.download}" th:text="${session.topic.download}">https://www.download.com</a></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td style="border: 0;background-color: initial">
                                    <div class="contentMd" id="contentMd" th:text="${session.topicContent}">

                                    </div>
                                    <script>
                                        let htmlContend = document.querySelector('.contentMd').textContent;
                                        let mark = marked.parse(htmlContend,{ breaks: true });
                                        document.getElementById("contentMd").innerHTML = mark;
                                    </script>
                                </td>
                            </tr>
                        </table>
                    </td>
                </table>
            </div>
            <div class="bottom"></div>
        </div>
        <div class="comment">
            <div class="commentTop">
                <img src="./img/title_bg_long.png" alt="">
                <p>评论区&emsp;Comment</p>
            </div>
            <div class="commentMain">
                <table class="commentTable" th:each="comment : ${session.comments}">
                    <tbody>
                        <tr>
                            <th>
                                <div class="authorName">
                                    <span><a class="user" th:href="'/personal?user='+${comment.user}" th:text="${comment.name}">用户名user</a></span>
                                </div>
                                <a th:href="'/personal?user='+${comment.user}"><img th:src="@{'/head_img/'+${comment.head}}" alt=""></a>
                                <div class="comment_bottom">
                                    <span th:text="${comment.introduce}">Aa啊哈吧</span>
                                </div>
                            </th>
                            <td style="background-color: initial;">
                                <div class="commentTdTop">
                                    <img src="./img/steve.gif" alt="">
                                    <span class="text">
                                        发表于<span th:text="${comment.date}">0000-00-00</span>
                                        &emsp;|&emsp;
                                        <a th:href="'html?html='+${session.html}+'&user='+${comment.user}">只看他/她</a>
                                    </span>
                                </div>
                                <div class="commentTdBottom">
                                    <span th:text="${comment.content}">Aa啊哈吧</span>
                                </div>
                            </td>
                        </tr>
                        <tr class="none">
                            <td class="none">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="page">
                <button class="submit showAll" th:if="${session.lookUser}!=null" th:onclick="|showAll(${session.html})|">&ensp;显示全部&ensp;</button>
                <a th:href="'javascript:'+|page(1,${session.commentPage.getLastPage()},${session.lookUser},${session.html})|" class="back"></a>
                <a th:href="'javascript:'+|page(${session.commentPage.getPage()}-1,${session.commentPage.getLastPage()},${session.lookUser},${session.html})|" class="pre"></a>
                <span th:text="${session.commentPage.getPage()}+'/'+${session.commentPage.getLastPage()}">1/10</span>
                <a th:href="'javascript:'+|page(${session.commentPage.getPage()}+1,${session.commentPage.getLastPage()},${session.lookUser},${session.html})|" class="next"></a>
                <a th:href="'javascript:'+|page(${session.commentPage.getLastPage()},${session.commentPage.getLastPage()},${session.lookUser},${session.html})|" class="last"></a>
            </div>
            <form action="/saveComment" method="post" th:if="${session.user != null}">
                <table class="sendComment commentTable">
                    <tbody>
                        <tr>
                            <th>
                                <div class="authorName">
                                    <span><a class="user" th:href="'/personal?user='+${session.user.user}" th:text="${session.user.name}"></a></span>
                                </div>
                                <a th:href="'/personal?user='+${session.user.user}"><img th:src="@{'/head_img/'+${session.user.head}}" alt=""></a>
                                <div class="comment_bottom">
                                    <span th:text="${session.user.introduce}">Aa啊哈吧</span>
                                </div>
                            </th>
                            <td style="background-color: initial">
                                <div class="sendCommentTop commentTdTop">
                                    <span th:if="${session.commentTips == 'error'}" style="color: darkred">验证码错误</span>
                                    <span th:if="${session.commentTips == 'formatError'}" style="color: darkred">评论内容少于10字</span>
                                    <span th:if="${session.commentTips == 'success'}" style="color: darkgreen">发布成功</span>
                                    <img src="/jpegCode" alt="" class="veritify" id="veritify" onclick="Change()">
                                    <input type="text" maxlength="4" class="veritifyInput" id="code" name="code">
                                    <input type="submit" class="submit" value="发表">
                                </div>
                                <div class="sendCommentText commentTdBottom">
                                    <textarea name="content" id="content" th:text="${session.commentContent}"></textarea>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <table class="sendComment commentTable" th:if="${session.user == null}">
                <tbody>
                <tr>
                    <th>
                        <div class="authorName">
                            <span>请登录</span>
                        </div>
                        <img style="background-color: white" alt="">
                        <div class="comment_bottom">
                            <span>请登录</span>
                        </div>
                    </th>
                    <td style="background-color: initial;">
                        <div class="sendCommentTop commentTdTop">
                            <img style="background-color: white" alt="" class="veritify" onclick="">
                            <input type="button" class="submit" value="发表">
                        </div>
                        <div class="sendCommentText commentTdBottom">
                            <span>!请登录!</span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="tail">
        <p>StarFall<br>始于2016</p>
    </div>
</body>
<script>
    function Change() {
        var img = document.getElementById("veritify");
        var date = new Date().getTime();
        img.src="/jpegCode?"+date;
    }
</script>
<script src="./js/topic.js" type="text/javascript"></script>
</html>